<template>
  <div>
    <!-- 购物车页面每个商品的数字选择框，只读 -->
    <div class="mui-numbox" data-numbox-min="1" :data-numbox-max="p_stock">
      <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
      <!-- 将input设置为readonly，在vuex情况下，如果直接删除输入修改，会报错，提示需要用mutation方式操作数据 -->
      <input class="mui-input-numbox" type="text" readonly :value="p_goodsNum" 
      ref="input"
      @change="changeNum">
      <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
  </div>
</template>

<script>
import mui from '../../lib/mui/js/mui.min.js'
export default {
  data() {
    return {
      // num: "1"
    };
  },
  props:["p_stock","p_goodsNum","p_goodsId"],
  mounted(){
    mui(".mui-numbox").numbox();
  },
  methods: {
    
    changeNum(){
      // console.log(this.$refs.input.value)
      var changeObj = {
        goodsId: this.p_goodsId,
        selectedNum : parseInt(this.$refs.input.value)
      }
      // console.log(changeObj)
      this.$store.commit("updateCartNum",changeObj)
    }
  }
};
</script>

<style lang="scss" scoped>
.mui-numbox {
    border: none;
    background: #eee;
    height: 20px;
    .mui-input-numbox {
      background: #eee;
      border: none !important;
      font-size: 12px;
    }
  }
</style>
